<template>
  <div class="container-fluid">
    <div class="">
      <headers :userInfo="true"></headers>
      <div class="inventory row">
        <div class="col-xs-6">当前库存砖石：{{ nowStockBrick }}</div>
        <div class="col-xs-6 text-right">本月销售砖石：{{ thisMonthSellBrick }}</div>
        <div style="padding: 0 15px;">
          <span @click="rechargeFn()" class="btn" style="background: #ff9300;">充值记录</span>
        </div>
      </div>
      <div class="select-box row" style="padding: 0;padding-right: 15px;">
        <!-- 砖石 -->
        <div class="col-xs-4">
          <div class="list-box">
            <img class="icon" src="../../assets/2_03.png" alt="">
            <p class="number">200颗</p>
            <p class="price"><span class="glyphicon glyphicon-yen"></span>500</p>
            <a href="" class="btn">购买</a>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="list-box">
            <img class="icon" src="../../assets/2_03.png" alt="">
            <p class="number">200颗</p>
            <p class="price"><span class="glyphicon glyphicon-yen"></span>500</p>
            <a href="" class="btn">购买</a>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="list-box">
            <img class="icon" src="../../assets/2_03.png" alt="">
            <p class="number">200颗</p>
            <p class="price"><span class="glyphicon glyphicon-yen"></span>500</p>
            <a href="#" class="btn">购买</a>
          </div>
        </div>
        <!-- 金币 -->
        <div class="col-xs-4">
          <div class="list-box">
            <img class="icon" src="../../assets/2_05.png" alt="">
            <p class="number">3000币</p>
            <p class="price"><span class="glyphicon glyphicon-yen"></span>200</p>
            <a href="" class="btn">购买</a>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="list-box">
            <img class="icon" src="../../assets/2_05.png" alt="">
            <p class="number">3000币</p>
            <p class="price"><span class="glyphicon glyphicon-yen"></span>200</p>
            <a href="" class="btn">购买</a>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="list-box">
            <img class="icon" src="../../assets/2_05.png" alt="">
            <p class="number">3000币</p>
            <p class="price"><span class="glyphicon glyphicon-yen"></span>200</p>
            <a href="#" class="btn">购买</a>
          </div>
        </div>
      </div>
    </div>
    <transition name="slide"  mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
  import Headers from '../../components/Header';
  import {mapActions,mapGetters} from 'vuex';
  import {userContent} from '../../service/getData';
  export default{
    data(){
      return {
        headerTitle:'充值',
        returnStatus:true,
        nowStockBrick:null,
        thisMonthSellBrick:null
      }
    },
    components:{
      Headers
    },
    computed:{
      ...mapGetters([
        'headerStatus'
      ])
    },
    mounted(){
      let _this = this;
      this.$nextTick(function(){
        _this.headers();
        _this.nowStockBrick = userContent.userInfo.nowStockBrick;
        _this.thisMonthSellBrick = userContent.userInfo.thisMonthSellBrick;
      })
    },
    methods:{
      headers(){
        this.headerStatus.headerTitle = this.headerTitle;
        this.headerStatus.returnStatus = this.returnStatus;
      },
      rechargeFn(){
          this.$router.push('/recharge/recharge_log');
      }


    }
  }
</script>
<style scoped lang="less">
  @import "../../style/main";
  .slide-enter-active, .slide-leave-active {
    transition: all .3s;
  }
  .slide-enter, .slide-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
</style>
